<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>抑郁症患者总人数随年份增长趋势</title>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="../css/comon0.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100vh;
        }

        .box {
            text-align: center;
        }

        .alltitle {
            font-size: 24px;
            /* 调整文字的大小 */
        }

        .box>div {
            margin-bottom: 20px;
        }

        #main {
            width: 900px;
            height: 500px;
            /* 其他样式设置 */
        }
    </style>
</head>

<body>
    <div class="head222">
        <h1 style="font-size: 38px;margin-top: 50px">全球抑郁症患者大数据分析</h1>
    </div>
    <div class="container">
        <div class="box">
            <div class="alltitle">抑郁症患者总人数随年份增长趋势
                &nbsp;&nbsp;&nbsp;<a href="../index.html" style="font-size: 12px;"><i class="fas fa-home"
                        style="color: white;font-size: 20px;"></i></a>
            </div>
            <div id="main"></div>
        </div>
    </div>

    </div>

    <script type="text/javascript">
        $(function () {
            var myChart = echarts.init(document.getElementById('main'));

            var xdata = []
            var ydata = []
            $.getJSON("https://bdapi.gxist.cn/api/year-depressed", function (values) {

                for (var i = 0; i < values["data"].length; i++) {
                    xdata.push(values["data"][i]["year"])
                    ydata.push(values["data"][i]["depressedNo"])
                }
                option = {
                    //  backgroundColor: '#00265f',
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '0%',
                        top: '10px',
                        right: '0%',
                        bottom: '4%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: xdata,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                width: 1,
                                type: "solid"
                            },
                        },

                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            // rotate:50,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '18',
                            },
                        },
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            //formatter: '{value} %'
                            show: true,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '18',
                            },
                            formatter: function (value, index) {
                                var value
                                if (value >= 10000 && value < 1000000) {
                                    value = value / 10000 + '万'
                                } else if (value >= 1000000) {
                                    value = value / 1000000 + '百万'
                                } else if (value < 10000) {
                                    value = value
                                }
                                return value
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1	)",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                            }
                        }
                    }],
                    series: [
                        {
                            type: 'bar',
                            data: ydata,
                            barWidth: '35%', //柱子宽度
                            // barGap: 1, //柱子之间间距
                            itemStyle: {
                                normal: {
                                    color: '#2f89cf',
                                    opacity: 1,
                                    barBorderRadius: 5,
                                }
                            }
                        }

                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            })
        })

    </script>
</body>

</html>